<template>
  <div>
    <el-container>
      <el-header style="border: 5px solid skyblue; padding: 0">
        <div id="header">
          <div id="lr">
            <i class="el-icon-s-custom"></i>
            <span>登录 </span>|
            <span>注册</span>
          </div>
          <div id="tt">
            <i class="el-icon-s-home"></i>
            <span>首页>门票列表>门票详情</span>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="60%" style="border: 5px solid skyblue">
          <div>
            <el-carousel :interval="3000" height="400px">
              <el-carousel-item
                ><img src="/image/2.jpg" alt=""
              /></el-carousel-item>
              <el-carousel-item
                ><img src="/image/3.jpg" alt=""
              /></el-carousel-item>
              <el-carousel-item
                ><img src="/image/4.jpg" alt=""
              /></el-carousel-item>
              <el-carousel-item
                ><img src="/image/5.jpg" alt=""
              /></el-carousel-item>
              <el-carousel-item
                ><img src="/image/6.jpg" alt=""
              /></el-carousel-item>
              <el-carousel-item
                ><img src="/image/7.jpg" alt=""
              /></el-carousel-item>
              <el-carousel-item
                ><img src="/image/8.jpg" alt=""
              /></el-carousel-item>
            </el-carousel>
          </div>
        </el-aside>

        <el-main style="border: 5px solid skyblue">
          
            <h2 id="title">博鳌海洋公园</h2>
            <h4>景点地址: <span class="huise">新街口达内8楼</span></h4>
            <h4>开放时间: <span class="huise">09:30-17:30</span></h4>
            <h4>客服电话: <span class="huise">400-601-6699</span></h4>
            <h4>园区设置:</h4>
            <div><img src="../assets/sign.png" alt="" /></div>
            <div>
              园区公告:<b
                >园内各大场馆、游乐设施及演艺等具体呈现以游览当日实际公告为准...</b
              >
            </div>
            <div id="kouzhao"><img src="../assets/kouzhao.webp" alt="" /></div>
          
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {};
</script>


<style lang="scss" scoped>
#kouzhao {
  img {
    width: 100%;
    height: 100%;
  }
  width: 160px;
  height: 160px;
  position: absolute;
  right: 32px;
  top: 400px;
}

#lr {
  position: absolute;
  font-size: 14px;
  left: 40px;
}

#header {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: rgb(238, 238, 46);
  display: flex;
  align-items: center;
  justify-content: center;
}
.huise {
  font-size: 15px;
  color: rgb(73, 71, 71);
}
#title {
  padding-bottom: 3px;
  border-bottom: 3px solid orangered;
}

.el-carousel__item img {
  width: 100%;
  height: 100%;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>